<template>
    <div style="display: flex; height: 825px">
      <a-menu mode="inline" theme="dark" @click="handleMenuClick" v-model:selectedKeys="current" :items="items" style="width: 250px; font-size: large; font-weight: bolder;" />
      <div v-if="current[0] == 'new'">
        <NewTopic />
      </div>
      <div v-else>
        <TopicList :id="current[0]" :key="refreshKey" />
      </div>
    </div>    
</template>

<script lang="ts">
export default {
    name: 'Forum'
}
</script>

<script lang="ts" setup>
import { ref, onMounted, reactive, defineComponent } from 'vue';
import router from '@/router/index';
import { MenuProps } from 'ant-design-vue';
import NewTopic from './newTopic.vue';
import TopicList from './topicList.vue';

const current = ref<string[]>(['all']);
const items = ref<MenuProps['items']>([
{
  key: 'all',
  label: '全部帖子',
  title: '全部帖子',
},
{
  key: 'collected',
  label: '我收藏的',
  title: '我收藏的',
},
{
  key: 'created',
  label: '我创建的',
  title: '我创建的'
},
{
  key: 'new',
  label: '新建帖子',
  title: '新建帖子'
},
{
  key: 'back',
  label: '返回首页',
  title: '返回首页'
}
])
const refreshKey = ref<number>(0)

const handleMenuClick: MenuProps['onClick'] = async menuInfo => {
  if (menuInfo.key === 'back') {
    router.push( {name: 'main'} )
  }
  refreshKey.value += 1
};
</script>
